
<form class="form-horizontal"
      ng-class="{'form-group-sm': $storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT}"
      role="form" name="stageGeneralInfo">

  <!-- General Configuration for Pipeline-->
  <div class="form-group" ng-if="selectedType === pipelineConstant.PIPELINE">
    <label class="col-lg-3 col-md-4 control-label fs-unmask" translate="global.form.pipelineId">Pipeline ID</label>
    <div class="controls col-lg-7 col-md-8">
      <input readonly type="text" class="form-control" name="name"
             ng-model="pipelineConfig.info.pipelineId">
    </div>
  </div>

  <div class="form-group" ng-if="selectedType === pipelineConstant.PIPELINE">
    <label class="col-lg-3 col-md-4 control-label fs-unmask" translate="global.form.title">Title</label>
    <div class="controls col-lg-7 col-md-8">
      <input type="text" class="form-control" name="title"
             ng-readonly="isPipelineReadOnly || isPipelineRunning"
             ng-model="pipelineConfig.title">
    </div>
  </div>

  <div class="form-group" ng-if="selectedType === pipelineConstant.PIPELINE">
    <label class="col-lg-3 col-md-4 control-label fs-unmask" translate="global.form.description">Description</label>
    <div class="controls col-lg-7 col-md-8">
      <div ui-codemirror
           ng-class="{'codemirror-read-only': isPipelineReadOnly || isPipelineRunning}"
           ng-model="pipelineConfig.description"
           ui-refresh="refreshCodemirror"
           ui-codemirror-opts="{
                readOnly: (isPipelineReadOnly || isPipelineRunning),
                lineWrapping: true
              }"
           data-type="'STRING'">
      </div>
    </div>
  </div>

  <div class="form-group" ng-if="selectedType === pipelineConstant.PIPELINE">
    <label class="col-lg-3 col-md-4 control-label fs-unmask" translate="global.form.labels">Labels</label>
    <div class="controls col-lg-7 col-md-8">
      <ui-select multiple
                 tagging
                 tagging-label=" - new label"
                 ng-disabled="isPipelineReadOnly || isPipelineRunning"
                 tagging-tokens=",|ENTER"
                 ng-model="pipelineConfig.metadata.labels">
        <ui-select-match class="ui-select-match">{{$item}}</ui-select-match>
        <ui-select-choices class="ui-select-choices"
                           repeat="listValue in existingPipelineLabels | filter:$select.search">
          <div ng-bind-html="listValue | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
    </div>
  </div>

  <!-- General Configuration for Stages-->
  <div class="form-group" ng-if="selectedType === pipelineConstant.STAGE_INSTANCE">
    <label class="col-lg-3 col-md-4 control-label fs-unmask" translate="global.form.name">Name</label>
    <div class="controls col-lg-7 col-md-8">
      <input type="text" class="form-control" name="name"
             ng-readonly="isPipelineReadOnly || isPipelineRunning"
             ng-model="detailPaneConfig.uiInfo.label">
    </div>
  </div>

  <div class="form-group" ng-if="selectedType === pipelineConstant.STAGE_INSTANCE">
    <label class="col-lg-3 col-md-4 control-label fs-unmask" translate="global.form.description">Description</label>
    <div class="controls col-lg-7 col-md-8">
      <div ui-codemirror
           ng-class="{'codemirror-read-only': isPipelineReadOnly || isPipelineRunning}"
           ng-model="detailPaneConfig.uiInfo.description"
           ui-refresh="refreshCodemirror"
           ui-codemirror-opts="{
                readOnly: (isPipelineReadOnly || isPipelineRunning),
                lineWrapping: true
              }"
           data-type="'STRING'">
      </div>
    </div>
  </div>

  <div class="form-group" ng-if="selectedType === pipelineConstant.STAGE_INSTANCE && stageLibraryList.length > 1">
    <label class="col-lg-3 col-md-4 control-label fs-unmask" translate="home.detailPane.configurationTab.stageLibrary">Stage Library</label>
    <div class="controls col-lg-7 col-md-8">
      <select class="form-control"
              name="stageLibrary"
              ng-disabled="isPipelineReadOnly || isPipelineRunning"
              ng-model="detailPaneConfig.library"
              ng-options="item.library as item.libraryLabel for item in stageLibraryList">
      </select>
    </div>
  </div>

  <div class="form-group" ng-if="selectedType === pipelineConstant.STAGE_INSTANCE && detailPaneConfigDefn.producingEvents">
    <label class="col-lg-3 col-md-4 control-label fs-unmask" translate="home.detailPane.configurationTab.producingEventsConfig">Produce Events</label>
    <div class="controls col-lg-7 col-md-8">
      <input type="checkbox" name="producingEventsConfig"
             ng-change="producingEventsConfigChange()"
             ng-disabled="isPipelineReadOnly || isPipelineRunning"
             ng-model="producingEventsConfig.value">
    </div>
  </div>

</form>

<form class="form-horizontal" role="form"
      ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
      name="{{selectedType === pipelineConstant.STAGE_INSTANCE ? 'd' + detailPaneConfig.instanceName : 'pipeline'}}">

  <div class="form-group"
      ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
      ng-repeat="configDefinition in detailPaneConfigDefn.configDefinitions | filter: {group: '', displayMode: '!ADVANCED'} | orderBy: 'displayPosition'"
      ng-if="(verifyDependsOnMap(detailPaneConfig, configDefinition)) && configDefinition.group === '' && isShownByConfigDisplayMode(configDefinition.displayMode, detailPaneConfig.uiInfo.displayMode)"
      ng-init="configIndex = getConfigIndex(detailPaneConfig, configDefinition)">

   <ng-include ng-if="selectedType !== pipelineConstant.LINK"
               src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
  </div>
  <div class="show-advanced-button fs-unmask form-group">
    <div class="tooltip-wrapper col-lg-3 col-md-4"
        ng-class="{'disabled': configHasAdvancedIssues}"
        tooltip="{{configHasAdvancedIssues ? ('home.detailPane.advancedIssuesNeedFix' | translate) : ''}}"
        tooltip-append-to-body="true"
        tooltip-placement="right">
      <button class="btn btn-link dropdown-toggle" type="button"
          ng-click="toggleConfigDisplayMode()"
          ng-if="groupHasEnabledAdvancedConfig(detailPaneConfig, detailPaneConfigDefn.configDefinitions, [], '')"
          ng-disabled="configHasAdvancedIssues">
        <div ng-switch="detailPaneConfig.uiInfo.displayMode">
          <div ng-switch-when="ADVANCED">
            Hide Advanced Options
            <i class="glyphicon glyphicon-menu-up"></i>
          </div>
          <div ng-switch-default>
            Show Advanced Options
            <i class="glyphicon glyphicon-menu-down"></i>
          </div>
        </div>
      </button>
    </div>
  </div>
  <div class="form-group"
       ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
       ng-repeat="configDefinition in detailPaneConfigDefn.configDefinitions | filter: {group: '', displayMode: 'ADVANCED'} | orderBy: 'displayPosition'"
       ng-if="(verifyDependsOnMap(detailPaneConfig, configDefinition)) && configDefinition.group === '' && isShownByConfigDisplayMode(configDefinition.displayMode, detailPaneConfig.uiInfo.displayMode)"
       ng-init="configIndex = getConfigIndex(detailPaneConfig, configDefinition)">

    <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
  </div>
</form>
